<mat-toolbar color="primary">
  <mat-toolbar-row>
    <h1>ngx-markdown</h1>
    <span fxFlex></span>
    <button mat-icon-button (click)="toggleTheme()">
      <mat-icon>
        <img [hidden]="theme == 'light'" src="assets/icon-light-on.svg">
        <img [hidden]="theme == 'dark'" src="assets/icon-light-off.svg">
      </mat-icon>
    </button>
    <a mat-icon-button href="https://github.com/jfcere/ngx-markdown">
      <img src="assets/icon-github.svg">
    </a>
  </mat-toolbar-row>
</mat-toolbar>

<nav mat-tab-nav-bar backgroundColor="primary" disableRipple #tabHeader>
  <a mat-tab-link fxLayout="row" fxLayoutGap="8px" *ngFor="let route of routes" #tabLink="routerLinkActive"
    [active]="tabLink.isActive"
    [routerLink]="route.path"
    routerLinkActive>
    <img src="assets/icon-{{route.path}}.svg">
    <span>{{ route.data?.label }}</span>
  </a>
</nav>

<div class="outlet-wrapper" [@routeAnimation]="getRouteAnimation(outlet)" (@routeAnimation.Done)="handleFragment()">
  <router-outlet #outlet="outlet"></router-outlet>
</div>